/*
* @Author: zhangsai
* @Date: 2018/2/27
* @Last Modified by: zhangsai
* @Last Modified time: 2018/2/27
* @description: 流程配置
*/
<template>
    <div>
        <div class="right">
            <div>
                <!--<div class="ca-title">-->
                    <!--<el-button type="text" @click="createProcess" :disabled="!isAuthCreate">-->
                        <!--<i class="el-icon-plus"></i>&nbsp;新建流程类型-->
                    <!--</el-button>-->
                <!--</div>-->
                <el-row>
                    <el-col :span="2">
                        <div class="ca-title"><h3 class="h3">流程配置</h3></div>
                    </el-col>
                    <el-col :span="22">
                        <div class="ca-pull-right">
                            <el-button icon="el-icon-plus" class="ca-color-download"  @click="createProcess" :disabled="!isAuthCreate">
                                &nbsp;新建流程类型
                            </el-button>
                        </div>
                    </el-col>
                    </el-row>
                <div class="ca-m-t-15">
                    <el-table
                        :data="processData"
                        border
                        stripe
                        class="table_p_01 el-wid-100 ca-table">
                        <el-table-column label="序号" type="index" align="center" width="80px">
                            <template slot-scope="scope">
                                {{scope.$index+1+''}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="流程类型"
                            prop="type"
                            >
                            <template slot-scope="scope">
                                <el-button type="text"  :disabled="!isAuthEdit"
                                           @click="getProcessDetail(scope.row.id)"
                                >{{scope.row.type | getNameById('processType')}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="最后变更人"
                            prop="updateUserName"
                            >
                        </el-table-column>
                        <el-table-column
                            label="最近更新时间"
                            prop="updateTime"
                            >
                            <template slot-scope="scope">
                                {{scope.row.updateTime | moment('YYYY-MM-DD')}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            >
                            <template slot-scope="scope">
                                <el-button :disabled="!isAuthDel" type="text" size="small" @click="delProcess(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <el-dialog
                :title="title"
                :visible.sync="processDialogVisible"
                width="70%"
                @close = "close"
                :show-close="false"
                :close-on-click-modal="false"
                center>
                <div>
                    <el-row >
                        <el-col :span="4" class="set-width-140">流程模板</el-col>
                        <el-col :span="10">
                            <el-select size="small" v-model="params.type" class="ca-pro-select">
                                <el-option v-for="(data, i) in processList"
                                           :label="data.name"
                                           :value="data.id - 0"
                                           :key="i"
                                ></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row class="ca-m-t-15 ca-m-b-15 dashed-line">
                        <el-col :span="4" class="set-width-140">节点</el-col>
                        <el-col :span="8">
                            <el-radio-group v-model="node" size="small" class="ca-tabs">
                                <el-radio-button  class="ca-m-r-10" label="发起" >发起</el-radio-button>
                                <el-radio-button  class="ca-m-r-10"  label="中间节点">中间节点</el-radio-button>
                                <el-radio-button  class="ca-m-r-5"  label="归档">归档</el-radio-button>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" @click="addNode" size="small" class="img-btn">
                                <img class="add-btn" src="~__assets/images/add_btn.png" alt=""/>
                            </el-button>
                        </el-col>
                    </el-row>
                    <div class="ca-process">
                        <ul>
                            <li v-for="(item, i) in params.sysProcessRoleEntities" :key="i">
                                <el-row>
                                    <el-col :span="1" class="ca-process-ico">{{item.nodeName?item.nodeName+i:item.node}}</el-col>
                                    <el-col :span="23"class="ca-process-text">
                                        <el-row class="ca-process-text-layout">
                                            <el-col :span="5"><div class="show-text">选择部门/角色</div></el-col>
                                            <el-col :span="17">
                                                <el-select size="small" class="select-box"
                                                           v-model="item.deptId"
                                                           @change="changeDept(item.deptId, i)">
                                                    <el-option v-for="(department, j) in departmentList"
                                                               :label="department.deptName"
                                                               :value="department.deptId"
                                                               :key="j"
                                                    ></el-option>
                                                </el-select>
                                                <el-select size="small" v-model="item.roleId" class="select-box">
                                                    <el-option v-for="(role, j) in item.roleList"
                                                               :label="role.name"
                                                               :value="role.id"
                                                               :key="j"
                                                    ></el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col :span="2">
                                                <el-button class="pull-right" type="text" @click="deleteNode(i)"><img src="~__assets/images/delete-icon.png"></el-button>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                                <div class="ca-process-circle"></div>
                                <div :class="item.className"></div>
                            </li>
                        </ul>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="close">取 消</el-button>
                    <el-button type="primary" @click="saveProcess">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
//    const PARAMS = {
//        sysProcessRoleEntities: [],
//        // 流程 type
//        type: 1,
//        id: '',
//    }
    export default {
        data() {
            return {
                //权限
                isAuthSee: isNoAuth('系统配置-流程配置-查看'),
                isAuthCreate: isNoAuth('系统配置-流程配置-添加'),
                isAuthEdit: isNoAuth('系统配置-流程配置-修改'),
                isAuthDel: isNoAuth('系统配置-流程配置-删除'),
                processData: [],
                processDialogVisible: false,
                node: '发起',
                nodeName: '节点',
                params: {
                    sysProcessRoleEntities: [
                    ],
                    type: 1,
                    id: '',
                },
                // 部门
                departmentList: this.$store.state.user.department.departmentList,
                // 流程类型
                processList: this.$store.state.user.dictionaryMap.processType,
                title: '新建流程'

            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                if (!vm.isAuthSee) {
                    //vm.$message.error('没有此页面的操作权限');
                    vm.$message({
                        message: '没有此页面的操作权限',
                        type: 'error',
                        center: true
                    });
                    vm.$router.go(-1);
                    return;
                }
            });
        },
        watch: {
            'params.sysProcessRoleEntities': {
                handler: function (val) {
                    if ( val.length > 1) {
                        val.map(( item )=> {
                            if (item.node === '发起') {
                                item.className = 'ca-process-line first'
                            } else if (item.node === '归档') {
                                item.className = 'ca-process-line last'
                            } else {
                                item.className = 'ca-process-line'
                            }
                        })
                    } else {
                        val.map(( item )=> {
                            item.className = ''
                        })
                    }
                },
                deep: true
            }
        },
        mounted() {
            this.getProcessList();
            //console.log(this.$store.state.user, 'this.$store.state.user')
        },
        methods: {
            // 获取流程列表
            async getProcessList() {
                let resData = await apiHttp(api.GET_PROCESS_LIST);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.processData = resData.data || [];
                }
            },
            // 删除流程
            delProcess(row) {
                this.$confirm('是否删除此流程?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let params = {
                        processId: row.id
                    };
                    let resData = await apiHttp(api.DELETE_PROCESS, params);
                    if (resData.resCode === STATUS_HTTP_SUCCESS) {
                       // this.$message.success('删除成功');
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                            center: true
                        });
                        this.getProcessList();
                    }
                },()=>{
//                    this.$message({
//                        type: 'info',
//                        message: '已取消删除!',
//                        center: true
//                    });
                });
            },
            // 添加节点
            addNode() {
                let hasFirstList = this.params.sysProcessRoleEntities.filter(x => x.node === '发起');
                let hasLastList = this.params.sysProcessRoleEntities.filter(x => x.node === '归档');
                let len = this.params.sysProcessRoleEntities.length;
                if (hasFirstList.length > 0 && this.node === '发起') {
                    //this.$message.warning('发起节点只能有一个');
                    this.$message({
                        type: 'warning',
                        message: '发起节点只能有一个!',
                        center: true
                    });
                    return;
                } else if (hasLastList.length > 0 && this.node === '归档' ) {
                    //this.$message.warning('归档节点只能有一个');
                    this.$message({
                        type: 'warning',
                        message: '归档节点只能有一个!',
                        center: true
                    });
                    return;
                }
                switch (this.node) {
                    case '发起' :
                        this.params.sysProcessRoleEntities.unshift({
                            roleId: '',
                            deptId: '',
                            node: this.node,
                            roleList: [],
                            className: '',
                            nodeName: ''
                        });
                        break;
                    case '归档' :
                        if (hasFirstList.length === 0) { //判断是否有发起节点
                            this.$message({
                                type: 'warning',
                                message: '请先选择发起节点!',
                                center: true
                            });
                            return;
                        }
                        this.params.sysProcessRoleEntities.push({
                            roleId: '',
                            deptId: '',
                            node: this.node,
                            roleList: [],
                            className: '',
                            nodeName: '',
                        });
                        break;
                    case '中间节点' :
                        if (hasFirstList.length === 0) { //判断是否有发起节点
                            this.$message({
                                type: 'warning',
                                message: '请先选择发起节点!',
                                center: true
                            });
                            return;
                        }
                        if (hasLastList.length === 0) {
                            this.params.sysProcessRoleEntities.push({
                                roleId: '',
                                deptId: '',
                                node: this.node,
                                roleList: [],
                                className: '',
                                nodeName: this.nodeName,
                            });
                        } else {
                            this.params.sysProcessRoleEntities.splice(len - 1 ,0 ,{
                                roleId: '',
                                deptId: '',
                                node: this.node,
                                roleList: [],
                                className: '',
                                nodeName: this.nodeName,
                            })
                        }
                        break;
                }
            },
            // 删除节点
            deleteNode(i) {
               if (this.params.sysProcessRoleEntities[i].node === '发起') {
                   this.$message({
                       type: 'warning',
                       message: '必须要有发起节点！'
                   });
                   return
               }
                this.$confirm('是否删除此节点?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.params.sysProcessRoleEntities.splice(i, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                },()=>{
//                    this.$message({
//                        type: 'info',
//                        message: '已取消删除'
//                    });
                })
            },
            // 保存流程
            async saveProcess() {
                if (this.params.sysProcessRoleEntities.length === 0) { //判断是否有发起节点
                    this.$message({
                        type: 'warning',
                        message: '请选择节点!',
                        center: true
                    });
                    return;
                }
                // 验证部门为必填
                let checkList = this.params.sysProcessRoleEntities.filter( x => x.deptId === '');
                if (checkList.length > 0) {
                    //this.$message.warning('请选择部门');
                    this.$message({
                        type: 'warning',
                        message: '请选择部门!',
                        center: true
                    });
                    return;
                }
                // 验证部门为必填 end
                // 验证角色为必填
                let checkList2 = this.params.sysProcessRoleEntities.filter( x => x.roleId === '');
                if (checkList2.length > 0) {
                    //this.$message.warning('请选择部门');
                    this.$message({
                        type: 'warning',
                        message: '请选择角色!',
                        center: true
                    });
                    return;
                }
                // 验证角色为必填 end
                //原数据保存 和处理
                let obj = JSON.parse(JSON.stringify(this.params)) //不改变原来数据，防止一些属性丢失，如一些类名
                obj.sysProcessRoleEntities.map((item, i) => {
                    delete item.nodeName;
                    delete item.node;
                    delete item.roleList;
                    item.orderNum = i;
                    return item;
                });
                let params = {
                    ...obj
                };
                params.sysProcessRoleEntities.map((sub)=>{//删除不传的属性
                   delete sub.className
                })
                let resData = await apiHttp(api.SAVE_PROCESS, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    //this.$message.success('保存成功');
                    this.$message({
                        type: 'success',
                        message: '保存成功!',
                        center: true
                    });
                    this.processDialogVisible = false;
                    this.getProcessList();
                }
            },
            // 关闭弹框 初始化数据
            close() {
                //初始化数据
                this.params.sysProcessRoleEntities = []
                this.params.type = 1 // 流程 type
                this.params.id = ''
                //关闭弹框
                this.processDialogVisible = false
            },
            // 根据部门获取角色
            async changeDept(deptId, i) {
                let params = {
                    deptId: deptId
                };
                let resData = await apiHttp(api.GET_ROLE_BY_DEPT, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    let roleList = resData.data || [];
                    let roleId = this.params.sysProcessRoleEntities[i].roleId;
                    if (roleList.filter(x => x.id === roleId).length === 0) {
                        roleId = '';
                    }
                    this.params.sysProcessRoleEntities[i].roleList = roleList;
                    this.params.sysProcessRoleEntities[i].roleId = roleId;
                    this.params = Object.assign({}, this.params);
                }
            },
            // 新建流程
            createProcess() {
                this.processDialogVisible = true;
                this.title = '新建流程';
            },
            // 获取流程详情&修改
            async getProcessDetail(id) {
                this.processDialogVisible = true;
                this.title = '编辑流程';
                let params = {
                    id: id
                };
                let resData = await apiHttp(api.GET_PROCESS_DETAIL, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.params = resData.data || {};
                    let len = this.params.sysProcessRoleEntities.length;
                    this.params.sysProcessRoleEntities.map((item, i) => {
                        // 回显 节点
                        if (item.orderNum === 0 && i === 0) {
                            item.node = '发起';
                            item.nodeName = '';
                        } else if (i === len - 1 && item.orderNum === i) {
                            item.node = '归档';
                            item.nodeName = '';
                        } else {
                            item.node = '中间节点';
                            item.nodeName = '节点';
                        }
                        // 回显部门
                        this.changeDept(item.deptId, i);
                        return item;
                    })
                }
            }
        },
        components: {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    //下拉选框
    .select-box{
        width: 114px;
        height: 33px;
        margin-right: 12px;
    }
    //虚线
    .dashed-line{
        padding-bottom: 20px;
        margin-bottom: 10px;
        border-bottom: 1px dashed #ededed;
    }
    .show-text{
        padding: 7px;
        font-family: SimSun;
        font-size: 12px;
        color: #313131;
    }
    .set-width-140{
        width: 175px;
        padding-right: 19px;
        text-align: right;
        box-sizing: border-box;
        font-family: MicrosoftYaHei;
        font-size: 16px;
    }
    .ca-pro-box{
        border:1px solid #eee;
    }
    /*.ca-pro-select{*/
        /*width:150px;*/
    /*}*/
    .img-btn{
        padding:0;
        .add-btn{
            background-size: 27px 27px;
        }
    }
</style>
